<template>
  <view class="home-container" style="background-color: #f5f9ff; padding: 0;">
    <!-- 状态栏和时间 -->
    <view class="status-bar" style="padding: 15px 20px 0; display: flex; justify-content: space-between;">
      <text class="time" style="font-size: 17px; color: #000; font-weight: 600;">9:41</text>
      <view class="status-icons">
        <!-- 系统状态图标 -->
      </view>
    </view>

    <!-- 超市名称和地址 -->
    <view class="store-info" style="padding: 0 20px; margin-top: 10px;">
      <text class="store-name" style="font-size: 24px; color: #000; font-weight: bold; display: block;">沃尔玛超市</text>
      <text class="store-address" style="font-size: 14px; color: #999; display: block;">北京市海淀区四季青地区板井路69号</text>
    </view>

    <!-- 今日数据 - 增加间距 -->
    <view class="today-stats" style="display: flex; padding: 20px; justify-content: space-between;">
      <view class="stat-item" style="background-color: #1a73e8; border-radius: 12px; padding: 15px; width: 45%;">
        <text style="font-size: 14px; color: rgba(255,255,255,0.8);">今日销售额</text>
        <text style="font-size: 24px; color: #fff; font-weight: bold; margin-top: 5px; display: block;">5000.00</text>
      </view>
      <view class="stat-item" style="background-color: #1a73e8; border-radius: 12px; padding: 15px; width: 45%; margin-left: 10%;">
        <text style="font-size: 14px; color: rgba(255,255,255,0.8);">今日返利</text>
        <text style="font-size: 24px; color: #fff; font-weight: bold; margin-top: 5px; display: block;">200.00</text>
      </view>
    </view>

    <!-- 销售业绩 -->
    <view class="performance-section" style="background-color: #fff; border-radius: 12px; margin: 0 20px 15px; padding: 15px;">
      <text style="font-size: 18px; color: #000; font-weight: bold; display: block;">销售业绩</text>
      
      <!-- 调整后的选项卡行 -->
      <view class="tab-row" style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0;">
        <view style="display: flex;">
          <text 
            @click="switchTab('sales')"
            style="font-size: 16px; margin-right: 20px;"
            :style="activeTab === 'sales' ? 'color: #1a73e8; font-weight: bold;' : 'color: #666;'"
          >销售额</text>
          <text 
            @click="switchTab('rebate')"
            style="font-size: 16px;"
            :style="activeTab === 'rebate' ? 'color: #FF9500; font-weight: bold;' : 'color: #666;'"
          >返利</text>
        </view>
        <picker mode="selector" :range="months" range-key="name">
          <view style="font-size: 14px; color: #666; border: 1px solid #ddd; border-radius: 15px; padding: 5px 12px;">
            月 <text style="font-size: 12px;">▼</text>
          </view>
        </picker>
      </view>
      
      <!-- 图表区域 -->
      <view class="chart-area" style="height: 180px; justify-content: center; align-items: center; display: flex;">
        <text v-if="activeTab === 'sales'" style="font-size: 24px; color: #1a73e8; font-weight: bold;">￥3509.00</text>
        <text v-else style="font-size: 24px; color: #FF9500; font-weight: bold;">￥25.00</text>
      </view>
      
      <!-- 日期轴 -->
      <view class="date-axis" style="display: flex; justify-content: space-between; margin-top: 15px;">
        <text style="font-size: 12px; color: #999;">10-2</text>
        <text style="font-size: 12px; color: #999;">10-3</text>
        <text style="font-size: 12px; color: #999;">10-4</text>
        <text style="font-size: 12px; color: #999;">10-5</text>
        <text style="font-size: 12px; color: #999;">10-6</text>
        <text style="font-size: 12px; color: #999;">10-7</text>
        <text style="font-size: 12px; color: #999;">10-8</text>
      </view>
    </view>

    <!-- 团队成员 -->
    <view class="team-section" style="background-color: #fff; border-radius: 12px; margin: 0 20px; padding: 15px;">
      <view style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
        <text style="font-size: 18px; color: #000; font-weight: bold;">团队成员</text>
        <text style="font-size: 14px; color: #1a73e8;" @click="navigateToPerformance">更多</text>
      </view>
      
      <view class="team-member" style="display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f5f5;">
        <view style="width: 40px; height: 40px; border-radius: 20px; background-color: #eee; margin-right: 12px;"></view>
        <view style="flex: 1;">
          <text style="font-size: 16px; color: #000; display: block;">王犁</text>
          <text style="font-size: 12px; color: #999; display: block;">1号收银员</text>
        </view>
        <text style="font-size: 16px; color: #1a73e8; font-weight: bold;">23452345.00</text>
      </view>
      
      <view class="team-member" style="display: flex; align-items: center; padding: 12px 0;">
        <view style="width: 40px; height: 40px; border-radius: 20px; background-color: #eee; margin-right: 12px;"></view>
        <view style="flex: 1;">
          <text style="font-size: 16px; color: #000; display: block;">李俊晖</text>
          <text style="font-size: 12px; color: #999; display: block;">1号收银员</text>
        </view>
        <text style="font-size: 16px; color: #1a73e8; font-weight: bold;">452345.00</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'sales',
      months: Array.from({length: 12}, (_, i) => ({name: `${i+1}月`, value: i+1}))
    }
  },  
  methods: {
    switchTab(tab) {
      this.activeTab = tab
    }, 
    navigateToPerformance() {
      uni.navigateTo({
        url: '/pages/b/manager/01/admin_performance_list'
      })
    }
  }  
}
</script>